ANTOOZA-FRONTEND/app/widget/crew/[widgetToken]/style.scss

// OBS 친화 — 투명 배경 + 스크롤 숨김
html, body {
	overflow: hidden;
	background: transparent;
}

.crew-widget {
	width: 100%;
	padding: 16px;
	font-family: 'Pretendard', sans-serif;
	background: transparent;

	// theme variant는 의미 없음 — 위젯 자체는 항상 투명 (OBS 캐스팅용)
	&--basic, &--dark, &--minimal {
		background: transparent;
	}

	// ── 위젯 제목 ──
	&__title {
		text-align: center;
		font-weight: 700;
		font-size: var(--crew-title-size, 18px);
		font-family: var(--crew-title-font, inherit);
		color: var(--crew-title-color, #fff);
		margin-bottom: 12px;
	}

	// ── 컬럼 헤더 ──
	&__columns {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 6px 12px;
		margin-bottom: 6px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		font-size: 0.6875rem;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.5);
		letter-spacing: 0.03em;
	}

	&__col-rank { width: 28px; text-align: center; flex-shrink: 0; }
	&__col-icon { width: 28px; flex-shrink: 0; }
	&__col-name { flex: 1; min-width: 0; }
	&__col-rate { width: 50px; text-align: right; flex-shrink: 0; }
	&__col-amount { width: 70px; text-align: right; flex-shrink: 0; }
	&__col-count { width: 40px; text-align: right; flex-shrink: 0; }

	// ── 순위 리스트 ──
	&__list {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	&__item {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 12px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.08);
		font-family: var(--row-font-family, inherit);
		font-size: var(--row-font-size, inherit);
		color: var(--row-font-color, inherit);
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

		&--1 { background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.05)); }
		&--2 { background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(192, 192, 192, 0.05)); }
		&--3 { background: linear-gradient(135deg, rgba(205, 127, 50, 0.15), rgba(205, 127, 50, 0.05)); }
	}

	// ── 순위 배지 ──
	&__badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		font-size: 14px;
		font-weight: 800;
		flex-shrink: 0;

		&--1 { background: #FFD700; color: #000; }
		&--2 { background: #C0C0C0; color: #000; }
		&--3 { background: #CD7F32; color: #fff; }
		&--default { background: #555; color: #fff; }
	}

	// ── 크루원 아이콘 ──
	&__member-icon {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		flex-shrink: 0;
		object-fit: cover;
		background: #444;
		border: 1px solid rgba(255, 255, 255, 0.15);

		&--empty {
			display: inline-block;
		}
	}

	// ── 이름 ──
	&__name {
		flex: 1;
		font-weight: 600;
		color: inherit;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	// ── 기여도 ──
	&__rate {
		width: 50px;
		text-align: right;
		flex-shrink: 0;
		font-size: 0.85em;
		color: #A0D2FF;
		white-space: nowrap;
	}

	// ── 후원 금액 ──
	&__amount {
		width: 70px;
		text-align: right;
		flex-shrink: 0;
		font-weight: 700;
		color: #FF6B35;
		font-size: 0.85em;
		white-space: nowrap;
	}

	// ── 후원 건수 ──
	&__count {
		width: 40px;
		text-align: right;
		flex-shrink: 0;
		font-size: 0.8em;
		color: #aaa;
		white-space: nowrap;
	}
}